<template>
  <div class="charge">
    <van-nav-bar 
      title="收费标准"
      fixed  
      left-arrow 
      @click-left="onClickLeft" 
    />
    <van-list class="chargeList normalList">
      <van-panel 
        v-for="(item, index) in chargeList" 
        :key="index" 
        :title="item.title" 
      >
        <div class="detail">
          <div v-text="'适用对象: ' + item.object"></div>
          <div v-text="'服务价格: ' + item.price"></div>
          <div v-text="'服务内容: ' + item.content"></div>
          <div v-text="'备    注：' + item.remark"></div>
        </div>
      </van-panel>
    </van-list>
  </div>
</template>

<script>
  import { NavBar, List, Panel } from 'vant';
  import { mixins } from '../../common/mixins';

  export default {
    name: 'charge',
    components: {
      [NavBar.name]: NavBar,
      [List.name]: List,
      [Panel.name]: Panel,
    },
    mixins: [mixins],
    data () {
      return {
        chargeList: []
      }
    },
    created () {
      this.$api.other.getCharge( (res)=>{
        this.chargeList = res.data;
      })
    },
    methods: {
    }
  }
</script>

<style lang="scss">
  .charge {
    .chargeList{
      margin-top:46px;
    }
  }
</style>
